<template>
	<view class="review">
		<view class="review_top">
			<view class="cash">
				<text class="p_font_28 cash_title">该订单返现</text>
				<text class="p_font_44 cash_value">￥{{taobao_price}}</text>
			</view>
		</view>
		<view class="review_upload">
			<text class="upload_title">提交好评截图</text>
      <view class="prompt-text">仅限上传在淘宝交易好评评价截图，其他平台评价或者不相关图片无法获得奖励。</view>
			<view class="image_contaier">
				<view class="image_item item_view" v-for="(item, index) in imgsList" :key="index">
					<image :src="imgHost + item" mode="aspectFill" @click="getLook(imgsList, index)"></image>
					<image src="https://dy.sykj365.com/uploads/mini/cha@2x.png" class="close" @click="getDelImg(index)"></image>
				</view>
				<view class="image_item" @click="getUpImage" v-if="imgsList.length < 2">
					<image src="https://dy.sykj365.com/uploads/mini/upload.jpg"></image>
				</view>				
			</view>
		</view>
		<view class="order-no">
			<view class="uni-form-item uni-column">
				<input class="uni-input" focus placeholder="请输入淘宝订单号" v-model="order_no" />
			</view>
		</view>
		<view class="review_btn" @click="getSubmit">提交</view>
		<view class="review_desc" v-if="taobao_content">
			<!-- <text class="title">返现规则：</text>
			<text class="value">{{taobao_content}}</text> -->
			<view v-html="taobao_content"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id:'',
				taobao_price:'0',
				taobao_content: '',
				imgsList: [],
				imgHost: this.$api.yuming,
        order_no: '',
			}
		},
		onReady() {			
		},
		onLoad(e) {
			this.getInfo();
			if (e.order_id) this.order_id = e.order_id;
		},
		onShow() {
		},
		methods: {
			getInfo() {
				this.$http.post(this.$api.priceRemark).then(res => {
					const data = res.data;
					if(data.taobao_content) this.taobao_content = data.taobao_content;
					if(data.taobao_price) this.taobao_price = data.taobao_price;
				})
			},
			getUpImage() {
				let self = this;
				uni.chooseImage({
					count: 2 - self.imgsList.length,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType:['album'], // ['album', 'camera'], // 从相册，相机
					success: function(res) {
						let files = res.tempFilePaths;
						files.forEach((n, k) => {
							uni.showLoading({
								title: '正在上传...'
							});
							self.getFileUp(n, k == files.length - 1 ? true : false);
						})
					}
				});
			},
			getFileUp(e, s) {
				let self = this;
				uni.uploadFile({
					url: self.$api.upload,
					filePath: e,
					name: 'file',
					formData: {},
					success: (uploadFileRes) => {
						let result = JSON.parse(uploadFileRes.data);
						if (result.code === 20000) {
							self.imgsList.push(result.data.url);
							if (s) {
								getApp().getMsg('上传成功', 'success');
							}
						} else {
							getApp().getMsg(result.msg);
						}
					}
				});
			},
			getLook(imgsList, index) {
				getApp().getBigImg(imgsList, index);
			},
			getDelImg(index) {
				this.imgsList.splice(index, 1);
			},
			getSubmit() {
				if(this.imgsList.length === 0){
					return getApp().getMsg('请上传好评截图');
				}
        let images = this.imgsList.join(',');
				let f_ = {
					order_id: this.order_id,
					taobao_order_num: this.order_no,
					images,
				}
				this.$http.post(this.$api.evaluate, f_).then(res => {
					getApp().getMsg('申请成功');
					getApp().getBack();
				})
			}
		},
	}
</script>

<style lang="scss">
  .prompt-text {
    font-size: 24rpx;
    color: #666;
    line-height: 1.4;
    padding-top: 20rpx;
  }
	.review {
		min-height: 100vh;
		padding-bottom: 48rpx;
		background-color: #F4F5FA;
	}
	.review_top {
		width: 100%;
		height: 300rpx;
		background-image: url("https://dy.sykj365.com/uploads/mini/bg-top.jpg");
		background-size: 100% 100%;
		.cash {			
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: flex-start;
			text-align: center;
			.cash_title {
				margin-top: 48rpx;
				font-size: 28rpx;
				color: #666666;
				opacity: 0.8;
			}
			.cash_value {
				margin-top: 34rpx;
				font-weight: 800;
				font-size: 60rpx;
				color: #333333;
			}
		}
	}
	.order-no {
		width: calc(100% - 60rpx);
		background-color: #fff;
		margin-left: 30rpx;
		margin-top: 10rpx;
		padding: 20rpx 0;
		border-radius: 10rpx;
	}
	.review_upload {
		height: 390rpx;
		margin: -78rpx 30rpx 80rpx 30rpx;
		padding-top: 34rpx;
		padding-left: 40rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		.upload_title {
			font-weight: 500;
			font-size: 28rpx;
			color: #1A1A1A;
			opacity: 0.9;
		}
		.image_contaier {
			display: flex;
			flex: 1;
			justify-content: flex-start;
			margin-top: 98rpx;
			.image_item {
				margin-right: 30rpx;
				image {
					width: 140rpx;
					height: 140rpx;
				}
				.close {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					top: 0rpx;
					right: 0rpx;
				}
			}
			.item_view {
				position: relative;
			}
		}
	}
	.review_btn {
		margin: 0 auto;
		width: calc(100% - 60rpx);
		height: 84rpx;
		background: #009353;
		border-radius: 60rpx;
		border: 2px solid #009353;
		text-align: center;
		line-height: 84rpx;
		font-size: 36rpx;
		color: #fff;
	}
	.review_desc {
		margin: 80rpx 30rpx 80rpx 70rpx;
		color: #1A1A1A;
		line-height: 52rpx;
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: flex-start;
		.title {
			color: #1A1A1A;
			margin-bottom: 24rpx;
		}
		.value {
			color: #1A1A1A;
			line-height: 54rpx;
		}
	}
</style>